<template>
    <div class="canvas1" ref="canvasRef"></div>
  </template>
  
  <script setup>
  import * as echarts from "echarts";
  import { ref, onMounted, onUnmounted } from "vue";
  const canvasRef = ref(null);
  const myEchart = ref(null);
  onMounted(() => {
    myEchart.value = echarts.init(canvasRef.value);
    /**
     * 1,按数组顺序去对应类目轴，无论是x轴还是y轴，如果x，y都是类目轴，则无效
     * 2,如果数组里是能和类目轴对应上的字符串，并且x，y都是一样的类目轴，则有效 
     * 3,如果都是value轴，则按数值生成x，y轴,然后按数值标在对应位置
     */
    let option = {
      yAxis: {
        // type: 'category',
        // data: ['d1', 'd2', 'd3', 'd4', 'd5']
      },
      xAxis: {
        // type: 'category',
        // data: ['d1', 'd2', 'd3', 'd4', 'd5']
      },
      series: [
        {
          type: "line",
          data: [32, 12, 45, 56, 78],
        }
      ],
    };
    myEchart.value.setOption(option);
  });
  onUnmounted(() => {
    myEchart.value.dispose(canvasRef.value);
  });
  </script>
  
  <style lang="less" scoped>
  .canvas1 {
    width: 800px;
    height: 400px;
    position: relative;
  }
  </style>
  